<template>
  <div class="newUser">
    <div class="form">
      <div class="form-item">
        <CustomInput
          v-model="formItem.userName"
          title="手机号码"
          placeholder="手机号码"
          :isInput="true" />
      </div>
      <div class="form-item code">
        <div class="codeInput">
          <CustomInput
            v-model="formItem.vifyCode"
            title="验证码"
            placeholder="验证码"
            :isInput="true" />
        </div>
        <div class="codeButton">
          <div
            class="btn"
            :class="{ isDisabled: !isCanSend }"
            @tap="sendCode">
            <span class="btn-text">
              {{buttonText}}
            </span>
          </div>
        </div>
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.password"
          inputType="password"
          title="密码"
          placeholder="密码"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.againPassword"
          inputType="password"
          title="确认密码"
          placeholder="确认密码"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.realName"
          title="真实姓名"
          placeholder="真实姓名"
          :isInput="true" />
      </div>
      <div class="form-item">
        <CustomInput
          v-model="formItem.email"
          title="电子邮箱"
          placeholder="电子邮箱"
          :isInput="true" />
      </div>
    </div>

    <div class="action">
      <button @tap="actionClick">注册账号</button>
    </div>
  </div>
</template>

<script>
import CustomInput from 'components/CustomInput/CustomInput'
import { ERR_OK } from 'api/config'
import { newUser, sendTelphone } from 'api/newUser'
import { telphoneValid, emailValid } from 'common/js/rules'
import { shareMixin } from 'common/js/mixins'

export default {
  mixins: [shareMixin()],
  components: {
    CustomInput
  },
  computed: {
    buttonText ({ isCanSend, time }) {
      return isCanSend ? '发送验证码' : `${time}s后可发送`
    }
  },
  data () {
    return {
      formItem: {
        userName: '',
        password: '',
        againPassword: '',
        realName: '',
        email: ''
      },
      sessionId: '',
      time: 60,
      isCanSend: true
    }
  },
  methods: {
    deleteCustomKey (obj) {
      for (let key in obj) {
        if (key.indexOf('__custom_') > -1 || obj[key] === null) {
          delete obj[key]
        }
      }
    },
    sendCode () {
      if (!this.isCanSend) {
        return
      }
      if (!this.formItem.userName) {
        this.$showToast({
          title: '手机号码不能为空',
          icon: 'none'
        })
        return
      }
      this.sendTelphone()
    },
    actionClick () {
      if (!this.formItem.userName) {
        this.$showToast({
          title: '手机号码不能为空',
          icon: 'none'
        })
        return
      } else {
        if (!telphoneValid(this.formItem.userName)) {
          this.$showToast({
            title: '请正确填写手机号码',
            icon: 'none'
          })
          return
        }
      }

      if (!this.formItem.password || !this.formItem.againPassword) {
        this.$showToast({
          title: '请正确填写密码',
          icon: 'none'
        })
        return
      }

      if (this.formItem.password !== this.formItem.againPassword) {
        this.$showToast({
          title: '密码和确认密码不一致',
          icon: 'none'
        })
        return
      } else {
        if (this.formItem.password.length < 8) {
          this.$showToast({
            title: '密码长度不得低于8位',
            icon: 'none'
          })
          return
        }
      }

      if (!this.formItem.realName) {
        this.$showToast({
          title: '真实姓名不能为空',
          icon: 'none'
        })
        return
      }

      if (!this.formItem.email) {
        this.$showToast({
          title: '电子邮件不能为空',
          icon: 'none'
        })
        return
      }

      if (!emailValid(this.formItem.email)) {
        this.$showToast({
          title: '请正确填写电子邮件',
          icon: 'none'
        })
        return
      }

      this.newUser()
    },
    async sendTelphone () {
      this.$showLoading('正在发送')

      const { userName } = this.formItem

      const res = await sendTelphone({ userName })

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.sessionId = res.data
        this.isCanSend = false

        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(() => {
          this.time--
          if (this.time === 0) {
            this.time = 60
            this.isCanSend = true
            clearInterval(this.interval)
          }
        }, 1000)
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    },
    async newUser () {
      this.$showLoading('注册中')

      const obj = JSON.parse(JSON.stringify(this.formItem))
      obj.telphone = obj.userName

      const res = await newUser(obj, this.sessionId)

      this.$hideLoading()

      if (res.code === ERR_OK) {
        this.$showToast({
          title: '注册成功',
          success: () => {
            wx.redirectTo({
              url: '/pages/login/main'
            })
          }
        })
      } else {
        this.$showToast({
          title: res.msg,
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
  @import "~common/scss/color";

  .newUser {
    width: 100%;
    height: 100%;
    position: relative;
    > .form {
      padding: 0 10px;
      > .form-item {
        border-bottom: 1px solid rgb(232, 232, 232);
        &.code {
          display: flex;
          align-items: center;
          > .codeInput {
            flex: 1;
          }
          > .codeButton {
            flex: 0 0 120px;
            text-align: center;
            padding-top: 6px;
            > .btn {
              font-size: 28rpx;
              border-left: 1px solid #f2f2f2;
              > .btn-text {
                color: #444444;
              }
              &.isDisabled {
                > .btn-text {
                  color: lightgray;
                }
              }
            }
          }
        }
      }
    }
    > .action {
      width: 90%;
      margin: 0 auto;
      margin-top: 30px;
      > button {
        background-color: $color-default;
        color: white;
      }
    }
  }
</style>
